<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表单拆分</title>

<!-- 框架必需start -->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!-- 框架必需end -->

<!-- 树组件start -->
<script type="text/javascript" src="../../libs/js/tree/ztree/ztree.js"></script>
<link type="text/css" rel="stylesheet" href="../../libs/js/tree/ztree/ztree.css">
<!-- 树组件end -->

<!-- 树形下拉框start -->
<script type="text/javascript" src="../../libs/js/form/selectTree.js"></script>
<!-- 树形下拉框end -->

<!-- 日期控件start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期控件end -->

<!-- 数字步进器start -->
<script type="text/javascript" src="../../libs/js/form/stepper.js"></script>
<!-- 数字步进器end -->

<!-- 软键盘控件start -->
<script type="text/javascript" src="../../libs/js/form/keypad.js"></script>
<!-- 软键盘控件end -->


<!-- 表单拆分 start -->
<script src="../../libs/js/form/stepForm.js" type="text/javascript"></script>
<!-- 表单拆分 end -->
</head>
<body>
 
 <div class="page_content">
 	<div  style="width: 550px;margin:0 auto;">
   <form method="post" class="stepForm" stepFormTitle="true">
	    <div id="step1" class="stepForm" stepFormTitle="基础信息">
		    <table class="tableStyle" formMode="transparent">
				<tr>
			<td width="150">用户名：</td><td width="380"><input type="text"/></td>
		</tr>
		<tr>	
			<td>姓名：</td><td><input type="text"/></td>
		</tr>
		<tr>	
			<td>密码：</td><td><input type="password" id="pwd"/></td>
		</tr>
		<tr>	
			<td>密码确认：</td><td><input type="password"/></td>
		</tr>
		<tr>
			<td>爱好：</td><td>
				<input type="checkbox" id="checkbox-1" name="ck1" value="选项1"/><label for="checkbox-1" class="hand">唱歌</label>
				<input type="checkbox" id="checkbox-2" name="ck1" value="选项2"/><label for="checkbox-2" class="hand">跳舞</label>
				
			</td>
		 </tr>
		<tr>   
		    <td>性别：</td>
			<td><input type="radio" id="radio-1" name="ra" value="radio-1"/><label for="radio-1" class="hand">男</label>
				<input type="radio" id="radio-2" name="ra" value="radio-2"/><label for="radio-2" class="hand">女</label>
			</td>
		</tr>
		<tr>
			<td>年龄：</td><td><input type="text"/></td>
		</tr>
		<tr>	
			<td>电子邮件：</td>
			<td>
				<input type="text"/>		
			</td>
		</tr>

				<tr>
					<td colspan="2">
						<input type="button" value="下一步" selfTarget="step1" nextTarget="step2"/>
					</td>
				</tr>
			</table>
		</div>
		<div id="step2" class="stepForm" stepFormTitle="详细信息">
			<table class="tableStyle" formMode="transparent">
				<tr>
			<td>固定电话：</td><td><input type="text"/></td>
			</tr>
		<tr>
			<td>英文名：</td><td><input type="text"/></td>
		</tr>
		
		<tr>
			<td>手机号码：</td><td><input type="text"/></td>
		</tr>
		<tr>	
			<td>邮政编码：</td><td><input type="text"/></td>
		</tr>
		<tr>
			<td>QQ：</td><td><input type="text"/></td>
		</tr>
		
		<tr>
			<td>籍贯：</td><td><select prompt="请选择"  data='{"list":[{"value":"1","key":"北京"},{"value":"2","key":"黑龙江"}]}'></select></td>
		</tr>
		<tr>
			<td>团队：</td><td><div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"员工1"},{ "id":"2", "parentId":"0", "name":"员工2"},{ "id":"3", "parentId":"0", "name":"员工3"},{ "id":"4", "parentId":"0", "name":"员工4"}]}' multiMode="true" noGroup="true"></div></td>
		</tr>
		
		<tr>	
			<td>入职时间：</td><td><input type="text" class="date"/></td>
		</tr>
		
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step2" prevTarget="step1" />
						<input type="button" value="下一步" selfTarget="step2" nextTarget="step3" />
					</td>
				</tr>
		    </table>
	  </div>
	  <div id="step3" class="stepForm" stepFormTitle="补充信息">
		<table class="tableStyle" formMode="transparent">
			<tr>
			<tr>	
			<td>树形单选：</td><td><div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>	</td>
		</tr>	
			<td>树形多选：</td><td><div class="selectTree" data='{"treeNodes":[{"id":"1","parentId":"0","name":"部门1","nocheck":"true","clickExpand":"true","open":"true"},{"id":"11","parentId":"1", "name":"员工1"},{"id":"12","parentId":"1", "name":"员工2"},{"id":"13","parentId":"1", "name":"员工3"},{"id":"2","parentId":"0","name":"部门2","nocheck":"true","clickExpand":"true","open":"true"},{"id":"21","parentId":"2", "name":"员工4"}]}' multiMode="true"></div></td>
		</tr>
		<tr>
			<td>数字步进器：</td><td><input id="step1" type="text" class="stepper"/></td>
		</tr>
		<tr>	
			<td>软键盘控件：</td><td><input class="keypad" type="text"/></td>
		</tr>
		<tr>
			<td>文本域：</td>
			<td colspan="3">
			<textarea style="width:350px;"></textarea>
			</td>
		</tr>
		<tr>
			<td>上传：</td>
			<td>
			<input type="file"   showInfo="false" fileWidth="352"/>
			</td>
		</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step3" prevTarget="step2"/>
					<input type="button" class="primary" value=" 提 交 " onclick="sureHandler()"/>
				</td>
			</tr>
		</table>
	  </div>
	
	 
	</form>	
	</div>
  </div>
  <script>
  	function sureHandler(){
    	top.Toast("showSuccessToast", '进行提交处理');
    }
  </script>
</body>
</html>